<template>
  <div content="con">
    <el-card class="box-card">
      <div ref="stuLoginRef" class="text item">
        <el-table
            :data="stuD"
            style="width: 100%">
          <el-table-column
              label="姓名"
              prop="stuName"
              width="120">
          </el-table-column>
          <el-table-column
              label="学号"
              prop="stuNumber"
              width="120">
          </el-table-column>
          <el-table-column
              label="专业"
              prop="stuMajorId"
              width="120">
          </el-table-column>
          <el-table-column
              label="班级"
              prop="stuClassId"
              width="120">
          </el-table-column>
          <el-table-column
              label="今日签到"
              prop="isSign"
              width="120">
          </el-table-column>
        </el-table>
        <div class="item item2">
          <el-button style="width: 100%;height: 80px" type="primary" @click="sign">签到</el-button>
        </div>
        <div class="item">
          <el-button style="width: 100%;height: 80px" type="primary" @click="selectSign">查看签到历史</el-button>
        </div>
      </div>
    </el-card>
    <!--    签到历史弹框  -->
    <div v-if="dialogVisible" class="his">
      <el-table

          :data="signHistory"
          style="width: 100%">
        <el-table-column
            label="id"
            prop="id"
            width="180">
        </el-table-column>
        <el-table-column
            label="学生id"
            prop="stuId"
            width="180">
        </el-table-column>
        <el-table-column
            label="签到时间"
            prop="signInTime"
            width="180">
        </el-table-column>

      </el-table>
      <el-pagination
          :current-page="searchBody.pageNum"
          :page-size="searchBody.pageSize"
          :total="total"
          background
          layout="prev, pager, next"
          @current-change="pageNumChange">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import {selStu, stuSelectSign, stuSignIn} from "@/api/student-api";

export default {
  name: "StudentSignIn",
  data() {
    return {
      stuData: {
        id: '',
        stuId: '',
        stuName: '',
        stuNumber: '',
        stuClassId: '',
        stuMajorId: '',
        sex: '',
        password: ''
      },
      stuD: [],
      stuT: [],
      isSign: false,
      searchBody: {
        pageNum: 1,
        pageSize: 5,
        id: 0
      },
      signHistory: [],
      total: 0,
      //   签到历史弹框
      tableData: [{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'}],
      dialogVisible: false,
      form: {
        date: '',
        name: '',
        address: ''
      }
    };
  },
  mounted() {
    this.getStudent();
  },
  methods: {
    sign() {
      stuSignIn(this.stuData.stuId).then(res => {
        if (res.data.code === 200) {
          this.isSign = true;
          console.log("签到成功")
        } else {
          console.error("签到失败", res.data.message);
        }
      }).catch(error => {
        console.error("请求失败", error);
      });
    },
    selectSign() {
      this.dialogVisible = true;
      stuSelectSign(this.stuData.stuId, this.searchBody.pageNum, this.searchBody.pageSize).then(res => {
        if (res.data.code === 200) {
          this.signHistory = res.data.data.recodes;
          this.total = res.data.data.total;
          this.stuT = res.data.data.total;
          console.log(this.total);
          // this.console.log("签到历史", this.signHistory);
        } else {
          console.error("获取签到历史失败", res.data.message);
        }
      })
    },
    getStudent() {
      selStu().then(res => {
        this.stuD.push(res.data.data);
        this.stuData.stuId = res.data.data.id;
        console.log(this.stuData.stuId);
      })
    },
    pageNumChange(pageNum) {
      this.searchBody.pageNum = pageNum;
      this.selectSign()
    }
  }
};
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
  text-align: center;
}

.item {
  padding: 18px 0;
}

.item2 {
  padding-top: 35px;
}

.box-card {
  width: 480px;
}

.el-input__inner {
  text-align: center;
}

.el-card {
  width: 640px;
  height: 380px;
  padding-top: 0;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 0 auto;
}

.el-input {
  width: 300px;
  margin-bottom: 40px;
}

.his {
  width: 600px;
  margin: 0 auto;
  position: absolute;
  top: 50px;
  left: 464px;

}
</style>